<template>
	<view class="container">
		<view class="section sec-top">
			<view class="section-header">
				<view class="section-title">
					<view class="section-prefix"></view>
					<text class="sec-left">近期</text>
				</view>
			</view>
			<view class="task-list">
				<uni-grid :column="1"
					:showBorder="false"
					:square="false">
					<uni-grid-item>
						<view class="profile-item-v padding-all" style="justify-content: space-between;">
							<text>今日学习</text>
							<view class="profile-item-text sec-left">
								<view>{{ report.todayStudyLength }}分</view>
								<view class="text-custom">行动力超过了20%的用户</view>
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="profile-item-v padding-all" style="justify-content: space-between;">
							<text>本周学习</text>
							<view class="profile-item-text sec-left">
								<view>{{ report.weekStudyLength }}分</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
		<view class="section sec-top">
			<view class="section-header">
				<view class="section-title">
					<view class="section-prefix"></view>
					<text class="sec-left">最近7天学习时长</text>
				</view>
			</view>
			<view class="qiun-charts">
				<canvas canvas-id="canvasArea"
					id="canvasArea"
					class="charts">
				</canvas>
			</view>
		</view>
		<view class="section sec-top">
			<view class="section-header">
				<view class="section-title">
					<view class="section-prefix"></view>
					<text class="sec-left">累计</text>
				</view>
			</view>
			<view class="task-list">
				<uni-grid :column="1"
					:showBorder="false"
					:square="false">
					<uni-grid-item>
						<view class="profile-item-v padding-all" style="justify-content: space-between;">
							<text>累计时长</text>
							<view class="profile-item-text sec-left">
								<view>{{ report.sumStudyLength }}分</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
				<uni-grid :column="2"
					:showBorder="false"
					:square="false">
					<uni-grid-item>
						<view class="profile-item-v padding-all" style="justify-content: space-between;">
							<text>累计课程</text>
							<view class="profile-item-text sec-left">
								<view>{{ report.courseNum }}课</view>
							</view>
						</view>
					</uni-grid-item>
					<uni-grid-item>
						<view class="profile-item-v padding-all" style="justify-content: space-between;">
							<text>累计天数</text>
							<view class="profile-item-text sec-left">
								<view>{{ report.sumStudyLength }}天</view>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
import uCharts from '../../components/u-charts/u-charts.js';
var _self;
var canvasObj = {};
import { getMyReport } from '@/api/index.js';
export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				area: {
					categories: ["1", "2", "3", "4", "5", "6", '7'],
					series: [{name: '单位: 分钟', data: [10, 20, 30, 40, 50, 60, 70], color: "#007aff"}]
				},
				report: {}
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		},
		onShow() {
			const token = uni.getStorageSync('X-Auth-Token');
			if (!token) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
			getMyReport().then(res => {
				this.report = res.data;
				let data = (this.report && this.report.sevenDaysStudyList);
				let canvasArea = {
					categories: this.area.categories,
					series: [
						{
							name: '单位: 分钟',
							data: data,
							color: "#007aff"
						}
					]
				}
				this.fillData();
			})
		},
		methods: {
			fillData() {
				this.showArea("canvasArea", this.area);
			},
			showArea(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					padding: [0, 15, 10, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						lineHeight: 18,
						margin: 0,
					},
					dataLabel: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8,
						boundaryGap: 'justify' //两端不留白配置
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				});
			}
		}
	}
</script>

<style>
/* 通用样式 */
.qiun-charts {
	width: 750rpx;
	height: 500rpx;
	background-color: #FFFFFF;
}

.charts {
	width: 750rpx;
	height: 500rpx;
	background-color: #FFFFFF;
}
</style>
